<template>
  <div>
    <h1>test</h1>
    <el-button @click="testforceupdate">测试$forceUpdate</el-button>
    <reset-a></reset-a>
    <reset-b>
      <h1>上课注意听课</h1>
    </reset-b>
    <el-button @click="show = !show">v-if 强制刷新</el-button>
    <reset-vif v-if="show"></reset-vif>
    <hr />
    <reset-key :key="initKey" @resetKey="resetKey"></reset-key>

    <input-file-reader></input-file-reader>
  </div>
</template>

<script>
import InputFileReader from "../../../components/TestReset/InputFileReader.vue";
import ResetA from "../../../components/TestReset/ResetA.vue";
import ResetB from "../../../components/TestReset/ResetB.vue";
import ResetKey from "../../../components/TestReset/ResetKey.vue";
import ResetVif from "../../../components/TestReset/ResetVif.vue";
/* 
$forceUpdate 不能触发所有的生命周期钩子函数，只能触发beforeUpdate updated
在使用了$forceUpdate的父组件当中有子组件时，子组件会刷新吗？能否触发生命周期
$forceUpdate  不能触发不带插槽的子组件的重新渲染，能触发带有插槽的子组件的重新渲染。


v-if使用它做组件强制刷新时能触发所有的生命周期钩子函数，是真正意义上的销毁与重建所有消耗比较大
弊端 
闪屏
强制刷新时不建议使用


key  使用它做组件强制刷新时能触发所有的生命周期钩子函数
key是一个唯一的标识  不能重复 重复的key会造成渲染错误  修改key建议修改为Symbol
它不会闪屏








*/
export default {
  data() {
    return {
      show: true,
      initKey: "guozihao",
    };
  },
  components: { ResetA, ResetB, ResetVif, ResetKey, InputFileReader },
  methods: {
    testforceupdate() {
      this.$forceUpdate();
    },
    resetKey(key) {
      this.initKey = key;
    },
  },
  beforeCreate() {
    console.log("A beforeCreate");
  },
  created() {
    console.log("A created");
  },
  beforeMount() {
    console.log("A beforeMount");
  },
  mounted() {
    console.log("A mounted");
  },
  beforeUpdate() {
    console.log("A beforeUpdate");
  },
  updated() {
    console.log("A updated");
  },
  beforeDestroy() {
    console.log("A beforeDestroy");
  },
  destroyed() {
    console.log("A destroyed");
  },
};
</script>

<style lang="scss" scoped>
div {
  height: 100px;
}
</style>